// 引入 React 核心 hooks 和类型
import React, {useState} from 'react';
// 引入自定义类型 AICharacter
import {AICharacter} from '../types';
// 引入 lucide-react 图标：关闭和保存
import {X, Save} from 'lucide-react';

/**
 * PromptEditorProps 组件属性定义
 * character        : 当前要编辑的 AI 角色对象
 * onSave           : 保存修改后的角色对象回调
 * onClose          : 关闭弹窗回调
 */
interface PromptEditorProps {
    character: AICharacter;
    onSave: (character: AICharacter) => void;
    onClose: () => void;
}

/**
 * PromptEditor 组件
 * 用于弹窗编辑 AI 角色的基本信息、性格描述、思维风格及系统提示词
 */
export const PromptEditor: React.FC<PromptEditorProps> = ({
                                                              character,
                                                              onSave,
                                                              onClose
                                                          }) => {
    // 使用 useState 保存当前编辑中的角色对象（初始值来自 props.character）
    const [editedCharacter, setEditedCharacter] = useState<AICharacter>(character);

    // 点击“保存”按钮时的处理函数
    const handleSave = () => {
        onSave(editedCharacter); // 调用父组件的 onSave 把最新数据传出去
        onClose();               // 保存完成后关闭弹窗
    };

    return (
        // 全屏半透明遮罩层
        <div className="fixed inset-0 bg-black/80 flex items-center justify-center z-50 p-4">
            {/* 弹窗主体 */}
            <div className="bg-gray-900 p-6 rounded-xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">

                {/* 顶部标题栏：标题 + 关闭按钮 */}
                <div className="flex justify-between items-center mb-6">
                    <h2 className="text-2xl font-bold text-white">Edit AI Character</h2>
                    <button
                        onClick={onClose}
                        className="text-gray-400 hover:text-white transition-colors"
                    >
                        <X size={24}/>
                    </button>
                </div>

                {/* 表单区域 */}
                <div className="space-y-6">
                    {/* 基本信息：姓名 + 年龄 */}
                    <div className="grid grid-cols-2 gap-4">
                        <div>
                            <label className="block text-sm font-medium text-gray-300 mb-2">
                                Name {/* 姓名 */}
                            </label>
                            <input
                                type="text"
                                value={editedCharacter.name}
                                onChange={(e) => setEditedCharacter(prev => ({...prev, name: e.target.value}))}
                                className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-purple-500 focus:outline-none"
                            />
                        </div>
                        <div>
                            <label className="block text-sm font-medium text-gray-300 mb-2">
                                Age {/* 年龄 */}
                            </label>
                            <input
                                type="number"
                                value={editedCharacter.age}
                                onChange={(e) => setEditedCharacter(prev => ({...prev, age: parseInt(e.target.value)}))}
                                className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-purple-500 focus:outline-none"
                            />
                        </div>
                    </div>

                    {/* 性格描述 */}
                    <div>
                        <label className="block text-sm font-medium text-gray-300 mb-2">
                            Personality Description {/* 性格描述 */}
                        </label>
                        <textarea
                            value={editedCharacter.personality}
                            onChange={(e) => setEditedCharacter(prev => ({...prev, personality: e.target.value}))}
                            rows={3}
                            className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-purple-500 focus:outline-none resize-none"
                        />
                    </div>

                    {/* 思维风格下拉选择 */}
                    <div>
                        <label className="block text-sm font-medium text-gray-300 mb-2">
                            Thinking Style {/* 思维风格 */}
                        </label>
                        <select
                            value={editedCharacter.thinkingStyle}
                            onChange={(e) => setEditedCharacter(prev => ({
                                ...prev,
                                thinkingStyle: e.target.value as AICharacter['thinkingStyle']
                            }))}
                            className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-purple-500 focus:outline-none"
                        >
                            <option value="logical">Logical {/* 逻辑型 */}</option>
                            <option value="emotional">Emotional {/* 情感型 */}</option>
                            <option value="existential">Existential {/* 存在主义型 */}</option>
                            <option value="competitive">Competitive {/* 竞争型 */}</option>
                        </select>
                    </div>

                    {/* 系统提示词（system prompt） */}
                    <div>
                        <label className="block text-sm font-medium text-gray-300 mb-2">
                            System Prompt {/* 系统提示词 */}
                        </label>
                        <textarea
                            value={editedCharacter.systemPrompt}
                            onChange={(e) => setEditedCharacter(prev => ({...prev, systemPrompt: e.target.value}))}
                            rows={6}
                            className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white focus:border-purple-500 focus:outline-none resize-none font-mono text-sm"
                            placeholder="Enter the system prompt that defines how this AI character thinks and behaves..."
                        />
                    </div>
                </div>

                {/* 底部按钮：取消 / 保存 */}
                <div className="flex justify-end gap-4 mt-8">
                    <button
                        onClick={onClose}
                        className="px-6 py-3 bg-gray-700 hover:bg-gray-600 text-white rounded-lg font-semibold transition-colors"
                    >
                        Cancel {/* 取消 */}
                    </button>
                    <button
                        onClick={handleSave}
                        className="flex items-center gap-2 px-6 py-3 bg-purple-600 hover:bg-purple-700 text-white rounded-lg font-semibold transition-colors"
                    >
                        <Save size={20}/>
                        Save Character {/* 保存角色 */}
                    </button>
                </div>
            </div>
        </div>
    );
};
